<template>
  <div class="hotel user-common-bg">
    <div class="area-list">
      <h3>地区列表</h3>
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="id"
        :default-expanded-keys="[1]"
        @node-click="handleNodeClick"
        class="tree"
      ></el-tree>
    </div>
    <div class="container" v-loading="loading">
      <div v-if="dataList.length !== 0">
        <HotelCommonItem :hotel="dataList"></HotelCommonItem>
        <!-- 分页 -->
        <el-pagination
          v-show="dataList.length > 0"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          :page-count="7"
          style="text-align: right; margin-top: 24px"
        >
        </el-pagination>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
import HotelCommonItem from "@/components/HotelCommonItem.vue";
import { getHotelAreaList, getHotelList } from "@/api/user/hotel";

export default {
  name: "HotelView",
  components: {
    HotelCommonItem,
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      city: "",
      page: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1,
      loading: false,
      dataList: [],
    };
  },
  async created() {
    await this.getHotelAreaList();
    await this.getHotelList();
  },
  methods: {
    // 获取酒店区域列表
    async getHotelAreaList() {
      const res = await getHotelAreaList();
      // 利用Object.keys遍历对象
      let id = 0;
      Object.keys(res.data).forEach((key) => {
        const obj = {};
        obj.id = ++id;
        // 将key赋值给label
        obj.label = key;
        const children = [];
        // 然后根据key获取对应的value，并进行便利
        res.data[key].forEach((item) => {
          children.push({ id: ++id, label: item });
        });
        obj.children = children;
        this.data.push(obj);
      });
      // 赋初值，第一个默认查询的城市为对象的第一个key
      this.city = Object.keys(res.data)[0];
    },
    // 点击节点
    handleNodeClick(data) {
      if (!Object.keys(data).includes("children")) {
        this.city = data.label;
        this.getHotelList();
      }
    },
    // 获取酒店列表
    async getHotelList() {
      try {
        this.loading = true;
        const res = await getHotelList({
          page: this.page,
          pageSize: this.pageSize,
          city: this.city,
        });
        this.dataList = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取列表失败");
      } finally {
        this.loading = false;
      }
    },
    // 分页
    handleCurrentChange(page) {
      this.page = page;
      this.currentPage = page;
      this.getHotelList();
    },
  },
};
</script>

<style lang="less" scoped>
.hotel {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
  .area-list {
    padding: 14px 20px;
    width: 16%;
    height: 100%;
    min-height: 100px;
    border-radius: 6px;
    background-image: linear-gradient(120deg, #84faaf5b 0%, #8fd2f46b 100%);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.16);
    h3 {
      margin-bottom: 10px;
    }
    .tree {
      border-radius: 6px;
      box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
      background-image: linear-gradient(
        to top,
        rgba(168, 237, 234, 0.4) 0%,
        rgba(254, 214, 227, 0.4) 100%
      );
    }
  }
  .container {
    padding: 14px 20px;
    width: 82%;
    height: 100%;
    min-height: 300px;
    border-radius: 6px;
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.16);
  }
}
</style>